<template>
    <div class='city'>
        <div class="city_list">
            <ul>
                <li class="liclass" v-for="(item, index) in navigation" :key="index" @click="changeLeftBackground = item"
                    :class="{ actver: changeLeftBackground == item }">
                    {{ item }}
                </li>

            </ul>
            <ul v-for="(item, index) in placename" :key="index" @click="cityclick(index)">
                <li v-if="item.place === changeLeftBackground">
                    <div class=cite_div_img>
                        <img :src="item.data.image" alt="">
                        <p>{{ item.data.introduce }}</p>
                        <p>{{ item.data.money }} ￥</p>
                    </div>
                </li>
            </ul>
            <div class="block">
                <el-pagination background layout="prev, pager, next"  :total="totalDataNumbers">
                </el-pagination>
            </div>

            <!-- <ul>
                <li class="liclass" >
                    杭州
                    <ul>
                        <li>
                            <div class=cite_div_img>
                                <img src="@/assets/item1.jpg" alt="">
                                <p>一套坐落于杭州东站对面的温馨小屋/是上下两层的复式loft/地理位置优越</p>
                                <p>100 ￥</p>
                            </div>
                        </li>
                    </ul>
                </li>
                <li class="liclass" >
                    天津
                    <ul>
                        <li>
                            <div class=cite_div_img>
                                <img src="@/assets/item1.jpg" alt="">
                                <p>一套坐落于杭州东站对面的温馨小屋/是上下两层的复式loft/地理位置优越</p>
                                <p>100 ￥</p>
                            </div>
                        </li>
                    </ul>
                </li>
                <li class="liclass" >
                    北京
                    <ul>
                        <li>
                            <div class=cite_div_img>
                                <img src="@/assets/item1.jpg" alt="">
                                <p>一套坐落于杭州东站对面的温馨小屋/是上下两层的复式loft/地理位置优越</p>
                                <p>100 ￥</p>
                            </div>
                        </li>
                    </ul>
                </li>
                <li class="liclass" >
                    上海
                    <ul>
                        <li>
                            <div class=cite_div_img>
                                <img src="@/assets/item1.jpg" alt="">
                                <p>一套坐落于杭州东站对面的温馨小屋/是上下两层的复式loft/地理位置优越</p>
                                <p>100 ￥</p>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul> -->
        </div>
    </div>
</template>

<script>

export default {
    components: {},
    data() {
        return {
            showindex: 0,
            placename: [
                {
                    id: 0, place: "杭州",
                    "data": {
                        introduce: "一套坐落于杭州东站对面的温馨小屋/是上下两层的复式loft/地理位置优越 交通便利",
                        image: require('@/assets/item1.jpg'),
                        money: "100"
                    }
                },
                {
                    id: 1, place: "天津", "data": {
                        introduce: "一套坐落于杭州东站对面的温馨小屋/是上下两层的复式loft/地理位置优越 交通便利",
                        image: require('@/assets/item2.jpg'),
                        money: "200"
                    }
                },
                {
                    id: 2, place: "北京", "data": {
                        introduce: "一套坐落于杭州东站对面的温馨小屋/是上下两层的复式loft/地理位置优越 交通便利",
                        image: require('@/assets/item3.jpg'),
                        money: "300"
                    }
                },
                {
                    id: 3, place: "上海", "data": {
                        introduce: "一套坐落于杭州东站对面的温馨小屋/是上下两层的复式loft/地理位置优越 交通便利",
                        image: require('@/assets/item4.jpg'),
                        money: "312"
                    }
                },
                {
                    id: 4, place: "厦门", "data": {
                        introduce: "一套坐落于杭州东站对面的温馨小屋/是上下两层的复式loft/地理位置优越 交通便利",
                        image: require('@/assets/item5.jpg'),
                        money: "352"
                    }
                },
            ],
            navigation: ["杭州", "天津", "北京", "上海", "厦门"],
            changeLeftBackground: "杭州",
            totalDataNumbers:0,
        }
    },
    computed: {},
    watch: {},
    methods: {
    },
    created() {

    },
    mounted() {
        let placename = this.placename.length
        this.totalDataNumbers = placename
    },
    beforeCreate() { }, // 生命周期 - 创建之前
    beforeMount() { }, // 生命周期 - 挂载之前
    beforeUpdate() { }, // 生命周期 - 更新之前
    updated() { }, // 生命周期 - 更新之后
    beforeDestroy() { }, // 生命周期 - 销毁之前
    destroyed() { }, // 生命周期 - 销毁完成
    activated() { } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
.city {
    padding: 2% 15%;

    .city_list {
        ul {
            display: flex;
            list-style: none;

            .liclass {
                width: 110px;
                height: 38px;
                // padding-right: 5%;
                text-align: center;
                line-height: 38px;
                margin-right: 15%;
                border: 1px solid #eee;
                border-radius: 5px;
                background-color: #fff;
                box-shadow: 0 0 5px #000;
            }

            // .liclass:hover{
            //     background-color: #055256;
            //     color: #fff;
            //     border:1px solid transparent
            // }
            .actver {
                background-color: #055256;
                color: #fff;
                border: 1px solid transparent
            }
        }
    }

    .cite_div_img {
        width: 200px;
        padding: 23px 20px 0 10px;

        img {
            width: 200px;
        }
    }

    .block {
        text-align: center;
    }
}
</style>